<div bsModal #childModal="bs-modal" [config]="{'keyboard' : false, backdrop: 'static'}" keyboard="false" class="modal fade" tabindex="-1" role="dialog" arisa-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" [ngStyle]="showNewFilterForm === false ? {width: '80%'} : ''">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" (click)="unsubscribeRequest(); validationClick()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
        <h4 class="modal-title" *ngIf="showNewFilterForm === false">{{titleName}} <b>{{ formValues ? (formValues.id||formValues.ID) : 'Select a device' }}</b><i *ngIf="formValues" style="padding-left: 20px" class="glyphicon glyphicon-edit text-primary" (click)="formValues = null; initGetDevices();"></i></h4>
        <h4 class="modal-title" *ngIf="showNewFilterForm === true">Assign <b>{{customFilterValues.ID}}</b> to a new filter<i style="padding-left: 20px"></i></h4>
      </div>
      <my-spinner *ngIf="!isConnected && isRequesting" [isRunning]="isRequesting"></my-spinner>
      <div *ngIf="alertHandler.msg && !isConnected">
        <div [ngClass]="['panel-body', 'bg-'+alertHandler.type]">
          {{alertHandler.msg}}
        </div>
      </div>
      <div class="modal-body" style="display: flex !important" *ngIf="!formValues">
        <div class="col-md-6">
          <span> Select a device </span>
          <div class="col-md-12">
            <ss-multiselect-dropdown [options]="snmpdevs" [texts]="myTexts" [settings]="mySettings" ngModel (ngModelChange)="selectDevice($event)"></ss-multiselect-dropdown>
          </div>
        </div>
      </div>

      <!--FILTER EDITOR-->
      <div class="modal-body" style="display: flex !important" *ngIf="showNewFilterForm === true">
        <div class="col-md-12">

          <div *ngIf="alertHandler" style="margin-bottom: 20px">
            <div [ngClass]="['panel-body', 'bg-'+alertHandler.type]">
              {{alertHandler.msg}}
            </div>
          </div>
          <div class="col-md-12">

            <form [formGroup]="newFilterForm" class="form-horizontal" (ngSubmit)="saveMeasFilter()">
              <div class="form-group">
                <label class="control-label col-sm-2" for="id">ID</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Unique identifier of Measurement Filters "></i>
                <div class="col-sm-9">
                  <input formControlName="id" id="id" />
                  <control-messages [control]="newFilterForm.controls.id"></control-messages>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-2" for="IDMeasurementCfg">Measurements</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="List of Measurements to attach the filter"></i>
                <div class="col-sm-9">
                  <input readonly formControlName="IDMeasurementCfg" [ngModel]="selectedMeas">
                  <control-messages [control]="newFilterForm.controls.IDMeasurementCfg"></control-messages>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-2" for="FType">Filter type</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Filter input source: file or condiction OID"></i>
                <div class="col-sm-9">
                  <input readonly formControlName="FType" value="CustomFilter">
                  <control-messages [control]="newFilterForm.controls.FType"></control-messages>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-2" for="FilterName">CustomID</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="A valid OID to filter by"></i>
                <div class="col-sm-9">
                  <input readonly formControlName="FilterName" [ngModel]="customFilterValues.ID">
                  <control-messages [control]="newFilterForm.controls.FilterName"></control-messages>
                </div>
              </div>
              <div class="form-group">
                <label class="control-label col-sm-2" for="EnableAlias">Enable alias</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Allow get measurement tag from alias in the file"></i>
                <div class="col-sm-9">
                  <select formControlName="EnableAlias" id="EnableAlias">
                    <option value="true">Enable</option>
                    <option value="false">Disable</option>
                  </select>
                  <control-messages [control]="newFilterForm.controls.EnableAlias"></control-messages>
                </div>
              </div>

              <div class="form-group">
                <label class="control-label col-sm-2" for="Description">Description</label>
                <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Description of the Measurement Filter"></i>
                <div class="col-sm-9">
                  <textarea class="form-control" style="width: 50%" rows="2" formControlName="Description" id="Description"> </textarea>
                  <control-messages [control]="newFilterForm.controls.Description"></control-messages>
                </div>
              </div>

              <div class="col-sm-offset-4 col-sm-6">
                <button type="submit" [disabled]="!newFilterForm.valid">Submit</button>
              </div>
            </form>

          </div>
        </div>
      </div>

      <!--CUSTOM FILTER EDITOR-->
      <div class="modal-body" style="display: flex !important" *ngIf="formValues && showNewFilterForm === false">
        <div class="col-md-6">
          <div class="col-md-12">
            <div class="panel panel-primary" *ngIf="isConnected">
              <div class="panel-heading"><i class="glyphicon glyphicon-ok-circle" [tooltip]="alertHandler.msg" style="padding-right 5px"></i> Connection data </div>
              <div class="panel-body">
                <div class="col-md-5" *ngIf="measGroups.length > 0">
                  <h5>Measurement Group</h5>
                  <ss-multiselect-dropdown [options]="measGroups" [texts]="myTexts" [settings]="mySettings" ngModel (ngModelChange)="selectMeasGroup($event)"></ss-multiselect-dropdown>
                  <h5>Indexed OID</h5>
                  <input style="display: inline; width: auto" type="text" class="form-control" placeholder="Text input" disabled [ngModel]="selectedOID || 'No Index OID'" id="OID">
                </div>
                <div class="col-md-5" *ngIf="measGroups.length === 0">
                  <span class="text-danger"><span class="glyphicon glyphicon-alert" style="padding-right: 10px"></span>No Meas groups associated with device!</span>
                </div>
                <!-- Check if there are meas groups on device-->
                <div class="col-md-6" *ngIf="measGroups.length > 0">
                  <!-- Check if there are measurements on selected  Measgroups-->
                  <div class="input-group list-group" *ngIf="measOnMeasGroup">
                    <!-- Check if its directly loaded from "edit"-->
                    <div *ngIf="measOnMeasGroup.length === 0 && selectedMeas">
                      <span>Loaded Measurements <span class="badge">{{1}}</span></span>
                      <div class="input-group-addon">
                        <span class="text-success glyphicon glyphicon-eye-open" type="button"></span>
                      </div>
                      <div class="input-group-addon" style="background: none">
                        <span>{{selectedMeas}}</span>
                      </div>
                    </div>
                    <!-- Check if there are no related meas on CustomFilter-->
                    <div *ngIf="measOnMeasGroup.length === 0 && !selectedMeas">
                      <span>Loaded Measurements <span class="badge">{{0}}</span></span>
                      <div>
                        <span role="" class="text-danger">No measurement related with CustomFilter</span>
                      </div>
                    </div>
                    <!-- Load measurements on selected Measurement Group-->
                    <div *ngIf="measOnMeasGroup.length > 0">
                    <span>Measurements <span class="badge">{{measOnMeasGroup ? measOnMeasGroup.length : '0'}}</span></span>
                    <div *ngFor="let measurement of measOnMeasGroup; let i = index">
                      <div class="input-group" style="background: none">
                        <div class="input-group-addon">
                          <span [ngClass]="selectedMeas === measurement ? ['text-success glyphicon  glyphicon glyphicon-eye-open'] : ['glyphicon glyphicon-eye-close']" type="button"></span>
                        </div>
                        <div class="input-group-addon" style="background: none">
                          <span role="button" [ngClass]="selectedMeas === measurement ? ['text-success'] : ['text-default']" (click)="selectMeasOID(measurement)">{{measurement}}</span>
                        </div>
                      </div>
                    </div>
                  </div>
                  </div>
                  <!-- Warn meessage due to non-existence of measurements on MeasGroups-->
                  <div *ngIf="!measOnMeasGroup">
                    <span class="text-danger"><span class="glyphicon glyphicon-alert" style="padding-right: 10px"></span>No Measurement on selected Measurement Group</span>
                  </div>
                </div>
                <div class="col-md-12 text-right">
                  <button type="button" class="btn btn-primary text-right" style="margin-top:10px" [disabled]="!selectedOID || !isConnected" (click)="sendQuery()">Send query</button>
                </div>
              </div>
            </div>
          </div>

          <!--FILTERFORM-->
          <div class="col-md-12" *ngIf="selectedOID">
            <div class="panel panel-primary">
              <div class="panel-heading">
                <i *ngIf="filterForm.valid && checkedResults.length !== 0" class="glyphicon glyphicon-ok-circle" style="padding-right: 5px"></i>
                Custom Filter Config
              </div>
              <div class="panel-body">
                <div>
                  <form [formGroup]="filterForm" (ngSubmit)="addCustomFilter()">
                    <div class="form-group col-md-12">
                      <label class="control-label col-sm-3" for="ID">ID</label>
                      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Unique custom filter ID to identify it"></i>
                      <div class="col-sm-8">
                        <input formControlName="ID" id="ID" [ngModel]="filterForm.value.ID"/>
                      </div>
                    </div>
                    <div class="form-group col-md-12">
                      <label class="control-label col-sm-3" for="Description">Description</label>
                      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Set the description of this custom filter"></i>
                      <div class="col-sm-8">
                        <input formControlName="Description" id="Description"/>
                      </div>
                    </div>
                    <div class="form-group col-md-12">
                      <label class="control-label col-sm-3" for="Items">Items:
                        <span [ngClass]="checkedResults.length > 0 ? ['label label-info'] : ['label label-danger']">{{checkedResults.length}}</span>
                      </label>
                      <i placement="top" style="float: left" class="info control-label glyphicon glyphicon-info-sign" tooltipAnimation="true" tooltip="Items to filter on"></i>

                    </div>
                    <div formArrayName="Items" style="position: relative">
                      <div [formGroupName]="i" *ngFor="let filters of filterForm.controls.Items.controls; let i=index">
                          <div class="form-group" class="col-md-11 col-md-offset-1 ">
                            <div class="col-sm-3">
                              <span class="control-label" style="padding-top: 5px;">Item {{i}} <i class="glyphicon glyphicon-remove-circle text-danger" role="button" (click)="removeOption(filterForm.controls.Items.controls[i].value.TagID)"></i></span>
                            </div>
                            <div class="input-group col-sm-6">
                              <span class="input-group-addon">{{filterForm.value.Items[i].TagID}}</span>
                              <input type="text" class="form-control" formControlName="Alias" id="Alias" placeholder="Set the alias">
                            </div>
                          </div>
                        </div>
                    </div>
                    <div class="col-md-12 text-right">
                      <button class="btn btn-primary" style="padding-top:10px" type="submit" [disabled]="!filterForm.valid || checkedResults.length == 0">Submit</button>
                    </div>
                  </form>
                  <div *ngIf="showItemForm ===  true" class="col-md-8 panel panel-primary">
                    <h4> Custom Values</h4>
                    <form *ngIf="itemForm" [formGroup]="itemForm" (ngSubmit)="addCustomItem(itemForm.controls.TagID.value)">
                      <div class="form-group">
                        <div class="input-group col-sm-12" style="display: flex">
                          <input type="text" class="form-control" formControlName="TagID" id="TagID" placeholder="TagID">
                          <input type="text" class="form-control" formControlName="Alias" id="Alias" placeholder="Alias">
                          <h4 [ngClass]="itemForm.valid ? ['glyphicon glyphicon-ok-circle text-success'] : ['glyphicon glyphicon-exclamation-sign textz-danger']" style="margin-top: 3px;margin-left: 10px;" role="button" (click)="itemForm.valid ? addCustomItem(itemForm.controls.TagID.value) : ''"></h4>
                          <h4 role="button" class="glyphicon glyphicon-ban-circle text-danger" style="margin-top: 3px;margin-left: 10px" type="cancel" (click)="showItemForm = false"></h4>
                        </div>
                      </div>
                    </form>
                  </div>
                  <div>
                    <span *ngIf="!showItemForm" role="button" class="btn btn-primary" (click)="showItemFormPanel()"><i class="glyphicon glyphicon-plus"></i>Add values</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-6">
          <div *ngIf="isConnected">
            <my-spinner [isRunning]="isRequesting"></my-spinner>
          </div>
          <div *ngIf="queryResult" class="panel panel-default">
            <div class="panel-heading">
              <h4>
                Query OID: {{queryResult.OID}}
                <label *ngIf="queryResult.QueryResult.length != 0" [ngClass]="(queryResult.QueryResult[0].Type != 'ERROR' && queryResult.QueryResult[0].Type != 'NoSuchObject' && queryResult.QueryResult[0].Type != 'NoSuchInstance') ? ['label label-primary'] : ['label label-danger']" style="padding-top: 0.5em; margin:0px">
                  {{queryResult.QueryResult[0].Type != 'ERROR' && queryResult.QueryResult[0].Type != 'NoSuchObject' && queryResult.QueryResult[0].Type != 'NoSuchInstance' ? queryResult.QueryResult.length +' results': '0 results - '+queryResult.QueryResult[0].Type}}
                </label>
                <label *ngIf="queryResult.QueryResult.length == 0" class="label label-danger" style="padding-top: 0.5em; margin:0px">
                  0 results
                </label>
              </h4>
              <div class="text-left">
                Filter value: <input type=text [(ngModel)]="filter" placeholder="Filter..." (ngModelChange)="onChange($event)">
                <span class="pull-right">Elapsed: {{queryResult.TimeTaken | number:'1.0-8'}} s </span>
              </div>
            </div>
            <div *ngIf="queryResult.QueryResult.length != 0">
            <div class="panel-body" style="height:auto" *ngIf="(queryResult.QueryResult[0].Type != 'ERROR' && queryResult.QueryResult[0].Type != 'NoSuchObject' && queryResult.QueryResult[0].Type != 'NoSuchInstance')">
              <table class="table table-hover table-striped table-condensed" style="width:100%">
                <thead>
                  <tr>
                    <th>OID</th>
                    <th>Type</th>
                    <th>Value</th>
                    <th>
                      <span role="button" style="width:auto" (click)="selectAllOptions(all)">{{all? 'Select All' : 'Deselect All'}}</span>
                    </th>
                  </tr>
                </thead>
                <tr *ngFor="let entry of queryResult.QueryResult; let i = index">
                  <td>{{entry.Name}} </td>
                  <td> {{entry.Type}}</td>
                  <td>{{entry.Value}}</td>
                  <td>
                    <span id="blankCheckbox" style="width:auto" class="btn btn-default" (click)="selectOption(entry.Value)">
                      <i [ngClass] = "entry.checked ? ['glyphicon glyphicon-ok text-success']: ['glyphicon glyphicon-remove text-danger']"></i>
                    </span>
                  </td>
                </tr>
              </table>
            </div>
          </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" (click)="unsubscribeRequest(); validationClick()">Close</button>
      </div>
    </div>
  </div>
